import echarts from 'echarts'
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get () {
        return {
          // 多X轴折线图
          line: function (id) {
            const dom = document.getElementById(id)
            const myChart = echarts.init(dom)
            const colors = ['#5470C6', '#EE6666']
            const option = {
              color: colors,
              tooltip: {
                trigger: 'none',
                axisPointer: {
                  type: 'cross'
                }
              },
              legend: {},
              grid: {
                top: 70,
                bottom: 50
              },
              xAxis: [
                {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    onZero: false,
                    lineStyle: {
                      color: colors[1]
                    }
                  },
                  axisPointer: {
                    label: {
                      formatter: function (params) {
                        return (
                          'Precipitation  ' +
                                                    params.value +
                                                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                        )
                      }
                    }
                  },
                  // prettier-ignore
                  data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
                },
                {
                  type: 'category',
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLine: {
                    onZero: false,
                    lineStyle: {
                      color: colors[0]
                    }
                  },
                  axisPointer: {
                    label: {
                      formatter: function (params) {
                        return (
                          'Precipitation  ' +
                                                    params.value +
                                                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                        )
                      }
                    }
                  },
                  // prettier-ignore
                  data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: 'Precipitation(2015)',
                  type: 'line',
                  xAxisIndex: 1,
                  smooth: true,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                  ]
                },
                {
                  name: 'Precipitation(2016)',
                  type: 'line',
                  smooth: true,
                  emphasis: {
                    focus: 'series'
                  },
                  data: [
                    3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                  ]
                }
              ]
            }
            myChart.setOption(option)
          },
          // 中国地图
          chinaMap: function (id) {
            const dom = document.getElementById(id)
            const myChart = echarts.init(dom)

            const option = {
              series: [{
                name: '省',
                type: 'map',
                map: 'china',
                roam: true,
                zoom: 1.2,
                aspectScale: 0.75,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: 'rgba(0,0,0,0.4)'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0,255,236,0.1)',
                    borderColor: 'rgba(118,237,236,1)'
                  },
                  emphasis: {
                    areaColor: 'rgba(118,237,236,0.8)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            }

            option && myChart.setOption(option)
          },
          // 世界地图
          worldMap: function (id) {
            const dom = document.getElementById(id)
            const myChart = echarts.init(dom)
            const option = {
              grid: {
                width: '100%',
                height: '100%',
                left: '0%',
                right: '0%',
                bottom: '0%',
                containLabel: true
              },
              series: [
                {
                  type: 'map', // 类型
                  // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
                  name: '世界地图',
                  mapType: 'world', // 地图类型
                  // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
                  roam: true,
                  // 图形上的文本标签
                  label: {
                    show: false // 是否显示对应地名
                  },
                  zoom: 1.2,
                  // 地图区域的多边形 图形样式
                  itemStyle: {
                    // areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                    borderWidth: 0.5, // 描边线宽 为 0 时无描边
                    borderColor: 'red', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                    borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                  },
                  // 高亮状态下的多边形和标签样式
                  emphasis: {
                    label: {
                      show: true, // 是否显示标签
                      color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                    },
                    itemStyle: {
                      areaColor: 'blue' // 地图区域的颜色
                    }
                  }
                }
              ]
            }
            myChart.setOption(option)
          }
        }
      }
    }
  })
}

export default install
